import { useState } from 'react'
import './index.scss'
// import { Button } from 'antd';
import { Space, Input, Table, Tag, Pagination, Popconfirm, Button, Checkbox } from 'antd';
import type { ColumnsType } from 'antd/es/table';

const { Search } = Input;

//类型查找
function funcOFType(types: string) {
  let listType = [{
    type: 'all',
    color: 'geekblue',
    name: '全部类'
  }, {
    type: 'talk',
    color: 'green',
    name: '谈吐'
  }, {
    type: 'profess',
    color: 'loser',
    name: '表白'
  }, {
    type: 'appreciate',
    color: 'volcano',
    name: '鉴赏'
  }, {
    type: 'idle',
    color: 'green',
    name: '转让'
  }, {
    type: 'seek',
    color: 'volcano',
    name: '寻找'
  }, {
    type: 'work',
    color: 'loser',
    name: '活动'
  }]

  for (const i in listType) {
    if (types == listType[i].type) {
      return listType[i];
    }
  }
}

interface DataType {
  id: number;
  blok: string;
  type: string;
  date: string;
  place: string;
  user_id: number;
  content: string;
  comment: string;
  images: string[];
  user: {
    id: number;
    name: string;
    img: string;
    school: {
      id: number;
      name: string;
      department: string;
      professional: string;
    }
  }
}

function DivFunc() {
  //表格栏目
  const columns: ColumnsType<DataType> = [
    {
      title: '标签',
      dataIndex: 'type',
      key: 'type',
      width: 80,
      render: (types) => (
        <>
          <div className='tag'>
            <Tag color={funcOFType(types)?.color} key={types}>
              {funcOFType(types)?.name}
            </Tag>
          </div>
          <div className='tag'>
            <Tag color={funcOFType(types)?.color} key={types}>
              全国可见
            </Tag>
          </div>
        </>
      ),
    }, {
      title: '时间',
      key: 'date',
      width: 210,
      render: (res) => (
        <div className='box '>
          <span className='title'>发布时间：{res.date}</span>
          <span className='title'>采集时间：{res.date}</span>
        </div>
      ),
    }, {
      title: '用户',
      key: 'user',
      dataIndex: 'user',
      width: 220,
      render: (obj) => (
        <div className='user align'>
          <img className='user_img' src={obj.img}></img>
          <div>
            <span className='user_text'>ID：{obj.school.id}</span>
            <span className='user_text'>名称：{obj.name}</span>
            <span className='user_text'>学校：{obj.school.name}</span>
            <span className='user_text'>院系：{obj.school.department}</span>
            <span className='user_text'>专业：{obj.school.professional}</span>
          </div>
        </div>
      ),
    }, {
      title: '内容',
      key: 'content',
      dataIndex: 'content',
      width: 220,
    }, {
      title: '操作',
      key: 'action',
      width: 80,
      fixed: 'right',
      render: (_, record: any, index: any) => (
        <>
          <Popconfirm
            title="提醒"
            description="是否要操作？"
            okText="确认"
            cancelText="取消"
            placement="left"
            onConfirm={() => tapDelete(record, index)}
          >
            <Button size="small" type="primary">删除</Button>
          </Popconfirm>
        </>
      ),
    },
  ];
  const [data, setState] = useState<{ listData: DataType[] }>({
    //数据列表
    listData: [
      {
        id: 1,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 2,
        blok: 'wall',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 3,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 4,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 5,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 6,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 7,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 8,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 9,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 10,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      }, {
        id: 11,
        blok: 'talk',
        type: 'all',
        date: '2023-12-12 12:12:12',
        place: '上海#闵行',
        user_id: 123,
        content: '内容 内容 内容 内容 内容 内容',
        comment: '评论 评论',
        images: ['https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
        ],
        user: {
          id: 123,
          name: '张三',
          img: 'https://cdn.pixabay.com/photo/2023/11/30/07/11/river-8420934_1280.jpg',
          school: {
            id: 123,
            name: '海南热带海洋学院',
            department: '计算机科学与技术学院',
            professional: '软件工程',
          }
        }
      },

    ]
  })
  //选项
  const tapCheckbox = (blok: string) => {
    console.log(blok)
  }
  //删除
  const tapDelete = (render: any, index: any) => {
    console.log(render, index)
    data.listData.splice(index, 1)
    setState(State => ({ ...State, listData: JSON.parse(JSON.stringify(data.listData)) }))
  }
  //分页
  const tapPagination = (res: any) => {
    console.log(res)
  }
  //搜索
  const tapSearch = (res: any) => {
    console.log(res)
  }

  return (
    <div className='info_body'>
      {/* 选项区 */}
      <div className='checkbox'>
        <Checkbox className='box align' onChange={() => tapCheckbox('talk')}>学校</Checkbox>
        <Checkbox className='box align' onChange={() => tapCheckbox('wall')}>考试</Checkbox>
        <Checkbox className='box align' onChange={() => tapCheckbox('all')}>招聘</Checkbox>
        <div className='tag align'>
          <Button size="small" type="primary">条件查询</Button>
        </div>
        <div className='tag align'>
          <Button size="small" type="primary">查询全部</Button>
        </div>
        <Space direction="vertical" className='search'>
          <Search placeholder="请输入搜索内容..." onSearch={tapSearch} />
        </Space>
      </div>
      {/* 表单 */}
      <Table columns={columns}
        dataSource={data.listData}
        pagination={false}
        scroll={{ y: '65.6vh' }}
        rowKey="id" />

      {/* 分页 */}
      <div className='pagination'>
        <Pagination
          size="small"
          showTitle={false}
          total={data.listData.length}
          // showTotal={(total) => `共 ${total} 条`}
          defaultPageSize={15}
          defaultCurrent={1}
          onChange={tapPagination}
        />

      </div>

    </div >
  )
}

export default DivFunc
